<template>
	<view class="container">
		<!-- 第一个卡片：日历组件 -->
		<view class="card card1 calendar-wrapper">
			<uni-calendar class="calendar-mini" :insert="true" :lunar="false"  :showMonth="false" :selected="selectedDates" @change="onDateChange"
				@monthSwitch="onMonthSwitch" />
		</view>

		<!-- 第二个卡片：课堂评价列表 -->
		<view class="card card2">
			<view class="evaluation-card" v-for="(item, index) in classList" :key="index">
				<view class="section-title">
					<text class="title-right">⏰{{ formatDate(item.classTimeBegin) }}</text>


				</view>

				<view class="eval-row">
					<view class="eval-block">
						<text class="title-left">📘{{ item.classTopic }}</text>
					</view>
					<text class="separator">|</text>
					<view class="eval-block">
						<uni-rate :readonly="true" :value="Number(item.gradeDetermination)" allow-half />
					</view>
				</view>

				<view class="link-row">
					<text class="link-text" @click.stop="goEvaluation(item)">查看评价</text>
					<text class="link-divider">·</text>
					<view class="link-row">
					  <text class="link-text" @click.stop="goCourseware(item)">课件复习</text>
					  <view class="score-badge" v-if="item.reviewAllScore">
					    ⭐{{ item.reviewAllScore }}分
					  </view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import UniCalendar from '@/uni_modules/uni-calendar/components/uni-calendar/uni-calendar.vue';
	import api from '@/api/api.js';
	import UniRate from '@/uni_modules/uni-rate/components/uni-rate/uni-rate.vue';

	export default {
		name: "GrowthReport",
		components: {
			UniCalendar,
			UniRate
		},
		data() {
			return {
				studentId: '',
				selectedDates: [],
				classList: [],
				studentEnglishName: ''
			}
		},
		onLoad(options) {
			this.studentId = options.studentId;
			this.studentEnglishName = options.studentEnglishName;
			this.studentName = options.studentName;
			
			
		},
		onShow() {
			const today = new Date();
			const yearMonth = `${today.getFullYear()}-${(today.getMonth()+1).toString().padStart(2,'0')}`;
			this.fetchRecord(yearMonth, true);
		},
		methods: {
			onDateChange(e) {
				this.fetchClassList(e.fulldate);
			},
			onMonthSwitch(e) {
				const yearMonth = `${e.year}-${e.month.toString().padStart(2,'0')}`;
				this.fetchRecord(yearMonth, true);
			},
			fetchRecord(yearMonth, loadClass = false) {
				api.getChectRecordDate({
					studentId: this.studentId,
					yearMonth
				}).then(res => {
					if (res.code == '200') {
						this.selectedDates = res.data || [];
						if (loadClass && this.selectedDates.length > 0) {
							let today = new Date();
							let closest = this.selectedDates.reduce((prev, curr) => {
								let prevDiff = Math.abs(new Date(prev.date) - today);
								let currDiff = Math.abs(new Date(curr.date) - today);
								return currDiff < prevDiff ? curr : prev;
							});
							this.fetchClassList(closest.date);
						}
					}
				})
			},
			fetchClassList(startDate) {
				api.selectClassroomWithEvaluation({
					studentId: this.studentId,
					startDate
				}).then(res => {
					if (res.code == '200') {
						this.classList = res.data || [];
					}
				})
			},
			formatDate(dateStr) {
				if (!dateStr) return '';
				let d = new Date(dateStr);
				let y = d.getFullYear();
				let m = (d.getMonth() + 1).toString().padStart(2, '0');
				let day = d.getDate().toString().padStart(2, '0');
				let h = d.getHours().toString().padStart(2, '0');
				let min = d.getMinutes().toString().padStart(2, '0');
				let s = d.getSeconds().toString().padStart(2, '0');
				return `${y}-${m}-${day} ${h}:${min}:${s}`;
			},
			goEvaluation(item) {
				const begin = this.formatDate(item.classTimeBegin);
				const end = this.formatDate(item.classTimeEnd);
				uni.navigateTo({
					url: `/pages/growthReport/classDetail?classTopic=${item.classTopic}&studentId=${this.studentId}&classId=${item.id}&teacherName=${item.teacherName}&classTimeBegin=${begin}&classTimeEnd=${end}&studentEnglishName=${this.studentEnglishName}&studentName=${this.studentName}`
				})
			},
			goCourseware(item) {
				uni.navigateTo({
					url: `/pages/growthReport/coursewareDetail?classId=${item.id}&pictureBookId=${item.pictureBookId}&vocabularyId=${item.vocabularyId}&studentId=${this.studentId}`
				})
			}
		}
	}
</script>

<style scoped>
	.container {
		display: flex;
		flex-direction: column;
		width: 100vw;
		min-height: 100vh;
		padding: 10rpx 30rpx;
		background: linear-gradient(to bottom, #e6f4ea 0%, #fdfaf4 100%);
		box-sizing: border-box;
	}

	.card {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		font-size: 20px;
		font-weight: bold;
		border: 1px solid #ddd;
		border-radius: 12rpx;
		margin: 16rpx 0;
		padding: 15rpx;
		box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.05);
		box-sizing: border-box;
		overflow: hidden;
	}

	.divider {
		height: 1rpx;
		background: #cde6c4;
		margin: 8rpx 0;
	}

	.card1 {
		background-color: #fff;
	}

	.card2 {
		background-color: #d1ecf1;
	}

	.calendar-wrapper {

		display: flex;
		justify-content: center;
	}

	.calendar-mini {
		transform: scale(0.9);
		transform-origin: top center;

	}

	.evaluation-card {
		width: 100%;
		background: #ffffff;
		border: 1px solid #ccc;
		border-radius: 10rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.08);
		transition: transform 0.2s;
		text-align: center;
	}


	.section-title {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 10rpx;
	}

	.title-left,
	.title-right {
		flex: 1;
		text-align: center;
		font-size: 26rpx;
	}

	.separator {
		color: #999;
	}

	.eval-row {
		display: flex;
		gap: 20rpx;
		margin-bottom: 15rpx;
	}

	.eval-block {
		flex: 1;
		border-radius: 8rpx;
		padding: 10rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 10rpx;
	}


	.link-text {
		font-size: 24rpx;
		color: #007bff;
	}

	.link-text:active {
		color: #0056b3;
	}

	.link-divider {
		color: #bbb;
	}
	.link-row {
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  gap: 12rpx;
	}
	.link-text {
	  font-size: 26rpx;
	  color: #007bff;
	}
	.score-badge {
	  background-color: #ffeeba;
	  color: #856404;
	  font-size: 22rpx;
	  padding: 4rpx 10rpx;
	  border-radius: 12rpx;
	}

</style>